<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改入驻培训机构管理信息')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<style>
    .threep{

        border: 1px solid #ddd;
        border-radius: 4px;
        background: transparent;
        outline: none;
        height: 30px;
        width: 200px;

    }
</style>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-institution-edit" th:object="${institution}">
            <input name="itId" th:field="${institution.itId}" type="hidden">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">机构名称：</label>
                <div class="col-sm-8">
                    <input name="itName" th:field="${institution.itName}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">联系人：</label>
                <div class="col-sm-8">
                    <input name="itLiaison" th:field="${institution.itLiaison}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">联系电话：</label>
                <div class="col-sm-8">
                    <input name="itPhone" th:field="${institution.itPhone}" class="form-control" type="text" required>
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-3 control-label is-required">所在省份：</label>
                <div class="col-sm-8">
                    <select class="threep" th:each="provinces : ${citys}" id="provinces" name="itProvince" onchange="provinceschange(1)">
                        <option value="">--请选择--</option>
                        <option class="pp provinces" th:value="${provinces.cId}" th:selected="${provinces.cId} == ${institution.itProvince}" th:text="${provinces.cName}"></option>
                    </select>

                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">所在城市：</label>
                <div class="col-sm-8">
                    <select class="threep" th:each="provinces : ${citys}" id="city" name="itCity" onchange="citychange(1)">
                        <option value="">--请选择--</option>
                        <div  th:each="city : ${provinces.children}">
                            <option style="display: none;" class="cc provinces" th:classappend="${city.fId}" th:value="${city.cId}" th:selected="${city.cId} == ${institution.itCity}" th:text="${city.cName}"></option>
                        </div>
                    </select>

                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">所在旗县区：</label>
                <div class="col-sm-8">
                    <select class="threep" th:each="provinces : ${citys}" id="region" name="itArea">
                        <option value="">--请选择--</option>
                        <div  th:each="city : ${provinces.children}">
                            <div th:each="region : ${city.children}">
                                <option style="display: none;" class="rr provinces" th:classappend="${region.fId}" th:selected="${region.cId} == ${institution.itArea}" th:value="${region.cId}" th:text="${region.cName}"></option>
                            </div>
                        </div>

                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">详细地址：</label>
                <div class="col-sm-8">
                    <input name="itAddress" th:field="${institution.itAddress}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">所在经纬度：</label>
                <div class="col-sm-8">
                    <input name="itLongitude" th:field="${institution.itGps}" class="form-control" type="text" required>
                    <div id="gdmap">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">机构详情：</label>
                <div class="col-sm-8">
                    <input type="hidden" id="itInfo" name="itInfo" th:value="${institution.itInfo}">
                    <div id="itInfoinsert"></div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">审核状态：</label>
                <div class="col-sm-8">
                    <label class="toggle-switch switch-solid">
                        <input type="checkbox" id="u_Satus" th:checked="${institution.itStatus == 1}">
                        <span></span>
                    </label>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">入驻时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="time" th:value="${#dates.format(institution.time, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=5788abd1acfdf8f29b6a3d821de26ca3"></script>
    <script type="text/javascript" src="/ruoyi/js/wangEditor.js"></script>
    <script th:inline="javascript">
        $("#itInfoinsert").html($("#itInfo").val());

        const E = window.wangEditor
        const editor = new E('#itInfoinsert')
        // 或者 const editor = new E( document.getElementById('div1') )

        // 配置 图片上传server 接口地址
        editor.config.uploadImgServer = ctx + "itsystem/institution" + "/imgupload";
        editor.config.uploadFileName = "img";

        editor.config.excludeMenus = [
            'video',
            'backColor',
            'code'
        ]

        editor.create();

        // 配置 onchange 回调函数
        editor.config.onchange = function (newHtml) {
            $("#itInfo").val(newHtml); // 获取最新的 html 内容
        }
        // 配置触发 onchange 的时间频率，默认为 200ms
        editor.config.onchangeTimeout = 1; // 修改为 500ms


        var map = new AMap.Map('gdmap');

        var marker;
        function addmarker(data){
            if(marker != null) {
                map.remove(marker);
            }
            $("#itGps").val("" + data.lng + "," + data.lat);
            marker = new AMap.Marker({
                position: new AMap.LngLat(data.lng, data.lat),
            });
            map.add(marker);
        }


        map.on('click', function(ev) {
            // 触发事件的地理坐标，AMap.LngLat 类型
            var lnglat = ev.lnglat;
            addmarker(lnglat);

        });


        AMap.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                // 是否使用高精度定位，默认：true
                enableHighAccuracy: true,
                // 设置定位超时时间，默认：无穷大
                timeout: 10000,
                // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                buttonOffset: new AMap.Pixel(10, 20),
                //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                zoomToAccuracy: true,
                //定位成功后在定位到的位置显示点标记，默认：true
                showMarker: false,
                //定位成功后用圆圈表示定位精度范围，默认：true
                showCircle: false,
                //  定位按钮的排放位置,  RB表示右下
                buttonPosition: 'RB'
            })



            geolocation.getCurrentPosition(function(status,result){
                if(status=='complete'){
                    onComplete(result)
                }else{
                    onError(result)
                }
            });

            function onComplete (data) {
                // data是具体的定位信息
                map.setZoom(15);
            }

            function onError (data) {
                // 定位出错
                console.log("失败");
            }
            AMap.event.addListener(geolocation, 'complete', onComplete);
            map.addControl(geolocation);
        })


        var prefix = ctx + "itsystem/institution";
        $("#form-institution-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-institution-edit').serialize());
            }
        }

        $("input[name='time']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });




        function provinceschange(key){
            if(key == 1) {
                var value = $("#provinces").val();
                $(".cc").hide();
                $(".rr").hide();
                $("#city").val("");
                $("#region").val("");
                $("." + value).show();
            }
        }


        function citychange(key) {
            if(key == 1) {
                var value = $("#city").val();
                $(".rr").hide();
                $("#region").val("");
                $("." + value).show();
            }
        }
    </script>
</body>
<style>
    #gdmap{
        width: 470px;
        height: 200px;
    }
</style>
</html>